<template>
<section>
    <div>
        <div>
              <!--工具条-->
            <toolbar :buttonList="buttonList" @callFunction="callFunction"></toolbar>
            <el-form :inline="true" :model="params" class="demo-form-inline">
              <el-form-item label="隶属医院">
                <el-input v-model="params.key" placeholder="请输入医院名称"></el-input>
              </el-form-item>
              <el-form-item label="医师职称">
                <el-select v-model="params.physician" placeholder="请选择医师职称">
                    <el-option :label="0"  :value="0">全部医师</el-option>
                    <el-option :label="1"  :value="1">主治医师</el-option>
                    <el-option :label="2"  :value="2">专家医师</el-option>
                    <el-option :label="3"  :value="3">普通医师</el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="从医年限">
                <el-input v-model="params.ageLimit" placeholder=""></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
              </el-form-item>
            </el-form>    
        </div>
      <div>
      <!-- 列表显示 -->
      <el-tabs v-model="status" @tab-click="handleClick" type="border-card">
  <el-tab-pane :value="0" label="待审核">
    <el-table
     :data="tableData"
       v-loading="listLoading"
      @select="dialogCheck"
      @row-click="selectCurrentRow"
    border
    style="width: 100%">
    <el-table-column type="selection" width="50">
    </el-table-column>
    <el-table-column
      prop="Id"
      label="序号"
      width="100">
    </el-table-column>
    <el-table-column
      prop="DoctorName"
      label="医师姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="Physician"
      label="医师职称"
      width="180">
    </el-table-column>
    <el-table-column
      prop="Hospital"
      label="隶属医院">
    </el-table-column>
    <el-table-column
      prop="AgeLimit"
      label="年限"
      width="100">
    </el-table-column>
    <el-table-column
      label="医师资格证书"
      width="120">
      <template slot-scope="scope">  
        <span v-if="scope.row.QualificationCard!=undefined">已上传</span>
        <span v-if="scope.row.QualificationCard==undefined">未上传</span>
      </template>
    </el-table-column>
    <el-table-column
      label="医师执业证书"
      width="120">
      <template slot-scope="scope">  
        <span v-if="scope.row.OccupationCard!=undefined">已上传</span>
        <span v-if="scope.row.OccupationCard==undefined">未上传</span>
      </template>
    </el-table-column>
    <el-table-column
      label="身份证"
      width="180">
      <template slot-scope="scope">      
        <span v-if="scope.row.IdentityCard!=undefined">已上传</span>
        <span v-if="scope.row.IdentityCard==undefined">未上传</span>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
        type="text"
          @click="handleDetail(scope.row.Id)">审核</el-button>
      </template>
    </el-table-column>
  </el-table> 
</el-tab-pane>
  <el-tab-pane :value="1" label="通过">
     <el-table
    :data="tableData1"
    border
    style="width: 100%">
    <el-table-column
      prop="Id"
      label="序号"
      width="120">
    </el-table-column>
    <el-table-column
      prop="DoctorName"
      label="医师姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="Physician"
      label="医师职称"
      width="180">
    </el-table-column>
    <el-table-column
      prop="Hospital"
      label="隶属医院">
    </el-table-column>
    <el-table-column
      prop="AgeLimit"
      label="年限"
      width="180">
    </el-table-column>
    <el-table-column
      label="医师资格证书"
      width="180">
      <template slot-scope="scope">
        
        <span v-if="scope.row.QualificationCard!=undefined">已上传</span>
        <span v-if="scope.row.QualificationCard==undefined">未上传</span>
      </template>
    </el-table-column>
    <el-table-column
      label="医师执业证书"
      width="180">
      <template slot-scope="scope">
        
        <span v-if="scope.row.OccupationCard!=undefined">已上传</span>
        <span v-if="scope.row.OccupationCard==undefined">未上传</span>
      </template>
    </el-table-column>
    <el-table-column
      label="身份证"
      width="180">
      <template slot-scope="scope">
        
        <span v-if="scope.row.IdentityCard!=undefined">已上传</span>
        <span v-if="scope.row.IdentityCard==undefined">未上传</span>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
        type="text"
        v-if="scope.row.status==0"
          @click="handleDetail(scope.row.Id)">审核</el-button>
          <el-button
        type="text"
        v-if="scope.row.status!=0"
          @click="handleDetail(scope.row.Id)">查看</el-button>
      </template>
    </el-table-column>
  </el-table> 
</el-tab-pane>
  <el-tab-pane :value="2" label="未通过">
    <el-table
    :data="tableData2"
    border
    style="width: 100%">
    <el-table-column
      prop="Id"
      label="序号"
      width="120">
    </el-table-column>
    <el-table-column
      prop="DoctorName"
      label="医师姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="Physician"
      label="医师职称"
      width="180">
    </el-table-column>
    <el-table-column
      prop="Hospital"
      label="隶属医院">
    </el-table-column>
    <el-table-column
      prop="AgeLimit"
      label="年限"
      width="180">
    </el-table-column>
    <el-table-column
      label="医师资格证书"
      width="180">
      <template slot-scope="scope">
        <span v-if="scope.row.QualificationCard!=undefined">已上传</span>
        <span v-if="scope.row.QualificationCard==undefined">未上传</span>
      </template>
    </el-table-column>
    <el-table-column
      label="医师执业证书"
      width="180">
      <template slot-scope="scope">
        <span v-if="scope.row.OccupationCard!=undefined">已上传</span>
        <span v-if="scope.row.OccupationCard==undefined">未上传</span>
      </template>
    </el-table-column>
    <el-table-column
      label="身份证"
      width="180">
      <template slot-scope="scope">      
        <span v-if="scope.row.IdentityCard!=undefined">已上传</span>
        <span v-if="scope.row.IdentityCard==undefined">未上传</span>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
        type="text"
        v-if="scope.row.status==0"
          @click="  (scope.row.Id)">审核</el-button>
          <el-button
        type="text"
        v-if="scope.row.status!=0"
          @click="handleDetail(scope.row.Id)">查看</el-button>
      </template>
    </el-table-column>
  </el-table>
</el-tab-pane>
      </el-tabs>
        <!-- 分页 -->
      </div>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="this.params.pageIndex"
            :page-sizes="[1, 2, 3, 4]"
            :page-size="this.params.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="this.pageCount">
          </el-pagination>
        </div>
      </div>

      </section>
</template>



<script>

import {
  testapi,
  DoctorList,
  DoctorDel,
} from "../../api/api";
import { getButtonList } from "../../promissionRouter";
import Toolbar from "../../components/Toolbar";

export default{
    components: { Toolbar },
    //定义数据模型
    data(){
        return{
            tableData:[],
            tableData1:[],
            tableData2:[],
            buttonList:[],
            sels: [], //列表选中列
            params:{
              physician: undefined,
              ageLimit:undefined,
              key:'',
              pageIndex:1,
              pageSize:5,
            },
            selectcurrentRow: null,
            pageCount:5,
            listLoading: false,
            status:0,
        }
    },
    //定义事件处理八大生命周期函数之一 挂载后事件
    mounted(){
            this.DoctorShow();

          let routers = window.localStorage.router
      ? JSON.parse(window.localStorage.router)
      : [];
    this.buttonList = getButtonList(this.$route.path, routers);
    },
    methods:{
      //工具栏的按钮点击事件处理
      callFunction(item) {
      this.filters = {
         name: item.search,
       };
       this[item.Func].apply(this, item);
      },
      //复选框选中
      selectCurrentRow(val){
        if (val) {
        this.currentRow = val;
        this.$refs.table.clearSelection();
        this.$refs.table.toggleRowSelection(val, true);
        }
      },
      dialogCheck(selection, row) {
        this.currentRow = null;
        this.$refs.table.clearSelection();
        if (selection.length === 0) {
          return;
        }
        if (row) {
          this.selectCurrentRow(row);
        }
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      handleSizeChange(val){
        this.params.pageSize=val;
        this.DoctorShow();
        this.DoctorShow1();
        this.DoctorShow2();
      },
      handleCurrentChange(val){
        this.params.pageIndex=val;
        this.DoctorShow();
        this.DoctorShow1();
        this.DoctorShow2();
      },
      //查询
      onSubmit(){
          console.log('submit!');
          this.DoctorShow();
          this.DoctorShow1();
          this.DoctorShow2();
      },
      //医生审核跳转
      handleDetail(id){
        console.log("Id",id);
          this.$router.push({path:"DoctorUpt",query:{Id:id}});
      },
      //删除
      handleDel() {
      let row = this.selectcurrentRow;
      if (!row) {
        this.$message({
          message: "请选择要删除的一行数据！",
          type: "error",
        });

        return;
      }
      this.$confirm("确认删除该记录吗?", "提示", {
        type: "warning",
      })
        .then(() => {
          this.listLoading = true;
          //NProgress.start();
          let params = { id: row.Id };
          DoctorDel(this.params).then((res) => {
            if (util.isEmt.format(res)) {
              this.listLoading = false;
              return;
            }
            this.listLoading = false;
            //NProgress.done();
            if (res.data.success) {
              this.$message({
                message: "删除成功",
                type: "success",
              });
            } else {
              this.$message({
                message: res.data.msg,
                type: "error",
              });
            }

            this.DoctorShow();
          });
        })
        .catch(() => {});
    },
      //医生显示列表
      DoctorShow(){
        let params = {
              pageIndex:this.pageIndex,
              pageSize:this.pageSize,
              physician:undefined,
              key:'',
              ageLimit:undefined,
        }
      this.listLoading = false;

      testapi();

          DoctorList(this.params).then((res)=>{
              console.log("医生列表：", res.data);
              this.tableData=res.data.response.data;
              this.pageCount=res.data.response.pageCount;
          })
      },
      DoctorShow1(){
        let params = {
              pageIndex:this.pageIndex,
              pageSize:this.pageSize,
              physician:undefined,
              key:'',
              ageLimit:undefined,
        }
          DoctorList(this.params).then((res)=>{
              this.tableData1=res.data.response.data;
              this.pageCount=res.data.response.pageCount;
          })
      },
      DoctorShow2(){
        let params = {
              pageIndex:this.pageIndex,
              pageSize:this.pageSize,
              physician:undefined,
              key:'',
              ageLimit:undefined,
        }
          DoctorList(this.params).then((res)=>{
              this.tableData2=res.data.response.data;
              this.pageCount=res.data.response.pageCount;
          })
      }
    },
}
</script>
<style>
.btn{
  float: right;
}
</style>